<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/webphone.js" type="text/javascript"></script>
</head>
<body>
<video id="remoteVideo" name="remoteVideo" style=" background:#0C6"></video>
<video id="localVideo" name="localVideo" muted="muted" style="background:#f00"></video>
<br>
<input type="input" id='number'><br>
<input type="button" onClick="ringout()" id='ringout'  value="拨号">
<input type="button" onClick="acceptphone()" id='acceptphone'  value="接听">
<input type="button" onClick="hangup()" id='hangup'  value="挂机">
<input type="button" onClick="hold()" id='hold'  value="保持"><br>
<input type="checkbox" id="autopickup" name="autopickup" value="1"> 自动接听<br>
<input type="input" id='dtmf'><br>
<input type="button" onClick="dtmf()" id='dtmf'  value="dtmf"><br>
<div style="background:#0C6;width:100%; height:20px;">注册状态：<span id='state'>已断开</span></div>
<div style="background:#0ff;width:100%; height:20px;">呼叫状态：<span id='state0'></span></div>
<div style="background:#fC6;width:100%; overflow:visible">对端状态：<span id='state2'></span></div>
<div style="background:#cc0;width:100%; overflow:visible">本端状态：<span id='state3'></span></div>
</body>
</html>
<script type="text/javascript">
var sss;
var holdstate=false;
var config = {
	uri: '1001@ssl.nicaicai.top',
	wsServers: ['wss://ssl.nicaicai.top:8089/ws'],
	authorizationUser: '1001',
	password: 'dgg123456',
	hackIpInContact: true,
	rtcpMuxPolicy: 'negotiate',
	hackWssInTransport: true,
};
var ua=new SIP.UA(config);


ua.on('registered', function () {
   document.getElementById('state').innerHTML='已连接';
});
ua.on('unregistered', function () {
   document.getElementById('state').innerHTML='已断开';
});
//接听电话
    ua.on('invite',function(session) {
	sss=session;
	play('ringin','start');
	
	var str='';
	arr=session.getLocalStreams();
	for(var i=0;i<arr.length;i++){
 		str+=arr[i];
	}
	
	arr2=session.getLocalStreams();
	var str2='';
	for(var i2=0;i<arr2.length;i++){
 		str2+=arr[i2];
	}
	
	alert('来电事件');
	alert('来电事1件'+str);
	alert('来电事2件'+str2);
    pickup();

});
    ua.on('accepted', function (data) {
	   document.getElementById('state3').innerHTML='accepted:'+data;
	});
	ua.on('rejected', function (response, cause) {
	   document.getElementById('state3').innerHTML='rejected:'+response+'|cause:'+cause;
	});
	ua.on('progress', function (response){
	   document.getElementById('state3').innerHTML='progress:'+response;
	});
	ua.on('failed', function (response, cause) {
	   document.getElementById('state3').innerHTML='failed:'+response+'|cause:'+cause;
	});
	
function acceptphone(){
	sss.accept({
        media: {
			render: {
                remote: document.getElementById('remoteVideo'),
                local: document.getElementById('localVideo')
            },
			constraints: {
			audio: true,
			video: false
		}
	}
    });
	play('ringin','end');
	alert('摘机事件');
}
function pickup(){
	if($('#autopickup').is(':checked')) {
		acceptphone();
	}
}
function dtmf(){
	$k=$('#dtmf').val();
	sss.dtmf($k);
}
//挂机
function hangup(){
	play('hangup','start');
	sss.terminate();
	alert('挂机事件');
}
function hold(){
	if(holdstate){
		holdstate=false;
		sss.unhold();
	}else{
		holdstate=true;
		sss.hold();
	}
}
//呼出
function ringout(){
	var phone=$('#number').val();
	//alert('webdial:'+phone);
	call(phone);
}
$('#number').keydown(function(e){
	var phone=$('#number').val();
	if(e.keyCode==13){
	   //alert('webdial:'+phone);
	   call(phone);
	}
});
function call(phone){
	var options = {
		media: {
			constraints: {
				audio: true,
				video: false
			},
			render: {
				remote: document.getElementById('remoteVideo'),
				local: document.getElementById('localVideo')
			}
		}
	};
	sss=ua.invite('sip:'+phone+'@cc1.zcallr.com', options);
	/*
	sss.on('accepted', function (data) {
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'accepted（接听）:'+data;
	});
	sss.on('rejected', function (response, cause) {
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'rejected（无法接通）:'+response+'|cause:'+cause;
	});
	sss.on('terminated', function (message, cause) {
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'terminated（结束）:'+message+'|cause:'+cause;
	});
	sss.on('progress', function (response){
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'progress（拨号中）:'+response;
	});
	sss.on('cancel', function () {
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'cancel（取消呼叫）';
	});
	sss.on('bye', function(request) {
		document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'bye（挂机）'+request;
	})
	sss.on('failed', function (response, cause) {
	   document.getElementById('state2').innerHTML=document.getElementById('state2').innerHTML+'<br><br>'+'failed（呼叫失败）:'+response+'|cause:'+cause;
	});
	*/
	call_events();
}


function call_events(){
	//sss.on('progress', function (response){//拨号中
		//$('#state0').html('拨号中');
	//});
	sss.on('accepted', function (data) {//接听
	  $('#state0').html('接听');
	});
	sss.on('cancel', function () {//取消呼叫
	   $('#state0').html('取消呼叫');
	});
	sss.on('failed', function (response, cause) {//呼叫失败
	   $('#state0').html('呼叫失败');
	});
	sss.on('rejected', function (response, cause) {//无法接通
	   $('#state0').html('无法接通');
	});
	sss.on('bye', function(request) {//挂机
		$('#state0').html('挂机');
	})
	sss.on('terminated', function (message, cause) {//结束
		$('#state0').html('结束');
	});
	  
	/*
	sss.on('progress',function(response){
		$('#state0').html('拨号中')
		//play('ringout','start')
		if(response.status_code===183&&response.body&&this.hasOffer&&!this.dialog){
			if(!response.hasHeader('require')||response.getHeader('require').indexOf('100rel')===-1){
				if(this.mediaHandler.hasDescription(response)) {
					if(!this.createDialog(response,'UAC')) return
					this.hasAnswer=true
					this.dialog.pracked.push(response.getHeader('rseq'))
					this.mute()
					this.mediaHandler.setDescription(response).catch((reason)=>{
						this.logger.warn(reason)
						this.failed(response, C.causes.BAD_MEDIA_DESCRIPTION)
						this.terminate({ status_code: 488, reason_phrase: 'Bad Media Description' })
					 })
				 }
			}
		}
	});
	*/
	sss.on('progress', function (response) {
		$('#state0').html('拨号中')
		if (response.status_code === 183 && response.body && this.hasOffer && !this.dialog) {
			if (!response.hasHeader('require') || response.getHeader('require').indexOf('100rel') === -1) {
				if (this.mediaHandler.hasDescription(response)) {
					if(!this.createDialog(response,'UAC')) return
					this.hasAnswer = true
					this.dialog.pracked.push(response.getHeader('rseq'))
					this.status =11;
					this.mute()
					this.mediaHandler.setDescription(response).catch((reason) => {
						this.logger.warn(reason)
						this.failed(response, C.causes.BAD_MEDIA_DESCRIPTION)
						this.terminate({status_code:488,reason_phrase:'Bad Media Description'})
					  })
				}
			}
		}
	});
}

//播放音乐
function play(type,action){
	if(action=='start'){
		if(type=='ringin'){
			audio='ringin.wav';
			loop=' loop="loop"';
		}else if(type=='ringout'){
			audio='ringout.wav';
			loop=' loop="loop"';
		}else if(type=='hangup'){
			audio='hangup.wav';
			loop='';
		}
		if(type!=''){
			$('#play').html('<audio autoplay="autoplay" '+loop+'><source src="audio/'+audio+'"' 
	+ 'type="audio/wav"/><source src="audio/'+audio+'" type="audio/mpeg"/></audio>');
		}
	}else if(action=='end'){
		$('#play').html(''); 
	}
}
</script>
<div id="play" style="display:none"></div>
